<template>
	<!-- 进度详情 -->
	<view class="container">
		<view class="top">
			<view class="name">
				<text>{{progress.title}}</text>
			</view>
			<view class="time">
				<text>{{progress.createTime}}</text>
			</view>
		</view>
		<view class="base-card">
			<advanced-lable :content="progress.partName" class="title"></advanced-lable>
			<view v-if="showVideo">
				<!-- <video id="myVideo" :src="getSrc(this.videoId)" style="width: 600rpx; height: 300rpx;"
					autoplay="true"></video> -->
				<view class="video-container" @click="gotoVideo()">
					<text class="title">点击查看视频</text>
					<!-- <video id="myVideo" style="width: 600rpx; height: 300rpx;" :src="_vsrc" @error="videoErrorCallback" controls></video> -->

				</view>
			</view>
			<view class="pixs">
				<view v-for="(img,index) in progress.pixs" :key="index">
					<image :src="getSrc(img)" class="pix" @tap="previewImage(index)"></image>
				</view>
			</view>
		</view>
		<view class="base-card">
			<advanced-lable content="进度数据看板" class="title"></advanced-lable>
			<view class="progress-boxs">
				<view class="progress-box">
					<text>{{progress.partName}}</text>
					<progress :percent="progress.progressValue" font-size='14' show-info activeColor="red"
						stroke-width="8" border-radius='10' />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {

		onLoad(_data) {
			let item = JSON.parse(decodeURIComponent(_data.item))
			this.progress = item
			this.progress.pixs = item.images.split(',')
			if ((typeof item.attributes != undefined) && (typeof item.attributes.video != undefined)) {
				this.videoId = item.attributes.video
				this.showVideo = true
				this._vsrc = uni.$http.baseURL + "/file/" + this.videoId + "/play.mp4"
			} else {
				this.showVideo = false
				this.videoId = ''
			}
		},
		data() {
			return {
				_vsrc: '',
				showVideo: false,
				videoId: '',
				title: '',
				time: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM'),
				estateId: '',
				rootPartId: '',
				sumTable: [],
				progress: {}
			};
		},
		onReady() {
			// this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			//预览轮播图
			previewImage: function(index) {
				let pixSrcs = []
				for (let i = 0; i < this.progress.pixs.length; i++) {
					let element = this.getSrc(this.progress.pixs[i])
					pixSrcs.push(element)
				}
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: pixSrcs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getSrc(id) {
				// let idArray = ids.split(',')
				// let id = idArray[0]
				if ((typeof id) != undefined && id != '') {
					let _src = uni.$http.baseURL + '/file/download?fileId=' + id
					return _src
				}
			},
			async gotoVideo() {
				let id = this.videoId
				if (id != '') {
					// let src = uni.$http.baseURL + "/file/" + id + "/play.mp4"
					// uni.navigateTo({
					// 	url: "/minepkg/web_video/web_video?src=" + _src
					// })
					let title = this.progress.attributes.subproject
					let info = {}
					info.title = title
					const {
						data
					} = await uni.$http.get(uni.$http.baseURL + '/file/getOssFileUrl', {
						fileId: id
					})
					if (data.status === 0) {
						info.src = data.body
						let item = encodeURIComponent(JSON.stringify(info));
						uni.navigateTo({
							url: "/mainpkg/play_video/play_video?info=" + item
						})
					} else {
						uni.showToast({
							title: data.message,
							icon: 'error'
						})
					}

				}
			},
			async getSum() {
				const {
					data
				} = await uni.$http.get(uni.$http.baseURL + '/progress/getProgressSum', {
					estateId: this.estateId,
					rootPartId: this.rootPartId
				})
				if (data.status === 0) {
					// "allCount": 0,
					//    "finishedCount": 0,
					//    "inProgressCount": 0,
					//    "nodeList": [
					//      {
					//        "percentage": 0,
					//        "progressValue": 0
					//      }
					//    ],
					//    "partName": "string"
					if (data.body.nodeList) {
						this.sumTable = data.body.nodeList
					}
				} else {
					uni.showToast({
						title: data.message,
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center;
		padding: 30rpx;

		.top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.time {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.base-card {
			border-radius: 20rpx;
			border: 1rpx solid #efefef;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx 11rpx 6rpx 28rpx;

			.pixs {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;

				// justify-content: space-around;
				.pix {
					width: 200rpx;
					height: 200rpx;
					margin-right: 10rpx;
					margin-bottom: 20rpx;
				}
			}

			.progress-boxs {
				display: flex;
				flex-direction: column;
				align-content: space-around;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;

				.progress-box {
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					progress {
						width: 444rpx;
					}
				}
			}
		}
	}

	.video-container {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;

		.title {
			line-height: 300rpx;
			text-align: center;
		}
	}
</style>
